import React from 'react'
import { connect } from 'react-redux'
import { del, edit, closeEdit, saveEdit } from '../actions'

let Todo = ({ onClick, onDoubleClick, completed, text, dispatch, todoID, editing }) => {
    let input
    let changeHandler = (id) => {
        dispatch(saveEdit(id, input.value))
    }
    return (
        <li
            style={{textDecoration: completed ? 'line-through' : 'none'}}
        >
            {
                editing ? 
                (
                    <div>
                        <input type='text' value={text} ref={node=>{input=node}} onChange={changeHandler.bind(this,todoID)} />
                        <button onClick={_=>{dispatch(closeEdit(todoID))}}>取消编辑</button>
                    </div>
                ) 
                : 
                (
                    <div className="view">
                        <input type="checkbox" checked={completed} onClick={onClick} />
                        <strong onDoubleClick={_ => {dispatch(edit(todoID))}}>{text}</strong>
                        <button onClick={_=>{ dispatch( del(todoID) ) }}> X </button>
                    </div>
                )
            }
        </li>
    )
}

Todo = connect()(Todo)

export default Todo
